import { useNavigate } from 'react-router-dom'
import { Button, theme, Modal, Row, Col, Form, Cascader, Input, Checkbox, Space, Table, Tag, message, Popconfirm } from 'antd'
// import Header from '@/components/header'
import { logout, goto, apiRequest } from '@/api'
import './account.scss'
import { useState } from 'react'

function Account() {
    // 使用钩子函数
    const navigate = useNavigate()
    const [telephone, setTelephone] = useState(null)
    const [dataSource, setDataSource] = useState([])
    const onChange = (e) => {
        console.log(e.target.value);
        setTelephone(e.target.value)
    };
    const getTable = () => {
        apiRequest({
            url: "http://127.0.0.1:8080/send_api/getTelephone",
            data: {
                "telephone": telephone
            },
            success: (res) => {
                console.log("res", res);
                setDataSource(res.result)
            },
        })
    }
    const cancel = (e) => {
        console.log(e);
        // message.error('Click on No');
    };
    const deleteTelephone = (record) => {
        apiRequest({
            url: "http://127.0.0.1:8080/send_api/InsertTelephone",
            data: {
                "username": record.username,
                "name": record.name,
                "is_deleted": 1,
                "telephone": record.telephone,
                "company": record.company,
                "flag": 1
            },
            success: (res) => {
                console.log(res)
                message.success(res.msg)
                getTable()
            },
        })
    }
    const updateTelephone = (record) => {
        apiRequest({
            url: "http://127.0.0.1:8080/send_api/InsertTelephone",
            data: {
                "username": record.username,
                "name": record.name,
                "is_deleted": 0,
                "telephone": record.telephone,
                "company": record.company,
                "flag": 1
            },
            success: (res) => {
                console.log(res)
                message.success(res.msg)
                getTable()
            },
        })
    }
    const columns = [
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
            //   render: (text) => <a>{text}</a>,
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'telephone',
            key: 'telephone',
        },
        {
            title: '项目信息',
            dataIndex: 'company',
            key: 'company',
        },
        {
            title: '删除标识',
            key: 'is_deleted',
            dataIndex: 'is_deleted',
        },
        {
            title: '操作',
            render: (_, record) => (
                <Popconfirm
                    title="是否删除手机号"
                    description="是否确认从白名单删除该手机号?"
                    onConfirm={() => { deleteTelephone(record) }}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                >
                    <a>删除</a>
                </Popconfirm>
            ),
        },
        {
            title: '恢复',
            render: (_, record) => (
                <Popconfirm
                    title="是否恢复手机号"
                    description="是否确认从白名单恢复该手机号?"
                    onConfirm={() => { updateTelephone(record) }}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                >
                    <a>恢复</a>
                </Popconfirm>
            ),
        },
    ];
    return (
        <div className="P-account">
            {/*
                <h1>Account Page</h1>
                <div className="ipt-con">
                    <Button type="primary" onClick={() => { navigate('/home') }}>返回主页</Button>
                </div>
            */}
            <Row className='P-row'>
                <Col span={5}>
                    手机号：<Input placeholder="手机号" value={telephone} onChange={onChange} style={{ width: "80%" }} />
                </Col>
                <Col span={4}>
                    <Button type="primary" onClick={() => { getTable() }} style={{ marginLeft: "20px" }}>查询</Button>
                </Col>
            </Row>

            <Table columns={columns} dataSource={dataSource} className='P-table' />;


        </div>
    )
}

export default Account